<template>
	<div class="headerSearch">
		<input type="search" v-model.trim="keyword">
		<button @click="search">搜索</button>
	</div>
</template>

<script>
	export default{
		name:'HeaderSearch',
		data() {
			return{
				keyword:''
			}
		},
		methods:{
			search(){
				// 查询关键字 与路由对象中的查询参数wd值不同时 调用$router.push()方法
				// 单击搜索按钮时 输入框内容作为查询参数在/search后面 并跳转到搜索页面
				if(this.keyword != this.$route.query.wd){
					this.$router.push({
						path:'/search',
						query:{
							wd:this.keyword
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
.headerSearch {
    display: inline-block; 
    position: relative;
}
.headerSearch input {
    width: 400px;
    height: 30px;
}

.headerSearch button{
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 30px;
    margin: 0;
    border: none;
    color: white;
    background-color: red;
    cursor: pointer;
}
</style>